<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="./css/bootstrap@5.1.3/bootstrap.min.css" rel="stylesheet">

    <title>个人中心</title>
    <style>
        tbody a {
            text-decoration: none;
        }
    </style>
</head>

<body>
<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script src="./js/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>
<script src="./js/holder.js@2.9.7/holder.js"></script>

<!-- 页面导航 -->
<script src="./js/nav.js"></script>
<!-- /页面导航 -->


<div class="container mt-3">
    <div class="row justify-content-center">
        <div class="col">
            <div class="d-flex align-items-start">
                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <button class="nav-link active" id="v-pills-order-tab" data-bs-toggle="pill"
                            data-bs-target="#v-pills-order" type="button" role="tab" aria-controls="v-pills-order"
                            aria-selected="true">我的订单
                    </button>
                    <button class="nav-link" id="v-pills-save-tab" data-bs-toggle="pill" data-bs-target="#v-pills-save"
                            type="button" role="tab" aria-controls="v-pills-save" aria-selected="false">我的收藏
                    </button>
                    <button class="nav-link" id="v-pills-password-tab" data-bs-toggle="pill"
                            data-bs-target="#v-pills-password" type="button" role="tab" aria-controls="v-pills-password"
                            aria-selected="false">修改密码
                    </button>
                    <button class="nav-link" id="v-pills-address-tab" data-bs-toggle="pill"
                            data-bs-target="#v-pills-address" type="button" role="tab" aria-controls="v-pills-address"
                            aria-selected="false">地址管理
                    </button>
                </div>
                <div class="tab-content" id="v-pills-tabContent">
                    <!-- 订单面板 -->
                    <div class="tab-pane fade show active" id="v-pills-order" role="tabpanel"
                         aria-labelledby="v-pills-order-tab">
                        <div class="container-fluid mt-3">
                            <div class="row">
                                <div class="col">
                                    <!-- 订单数据 -->
                                    <table class="table table-striped table-hover">
                                        <thead>
                                        <tr class="text-center">
                                            <th scope="col">#</th>
                                            <th scope="col">订单编号</th>
                                            <th scope="col">总金额</th>
                                            <th scope="col">订单状态</th>
                                            <th scope="col">下单时间</th>
                                        </tr>
                                        </thead>


                                        <tbody>
                                        <tr class="text-center">
                                            <th scope="row">1</th>
                                            <td>
                                                <a href="" data-bs-toggle="modal" data-bs-target="#orderItemModal">
                                                    123456789
                                                </a>
                                            </td>
                                            <td>$10000</td>
                                            <td>4</td>
                                            <td>2022-07-05 14:32:07</td>
                                        </tr>
                                        <tr class="text-center">
                                            <th scope="row">1</th>
                                            <td> 123456789</td>
                                            <td>$10000</td>
                                            <td>4</td>
                                            <td>2022-07-05 14:32:07</td>
                                        </tr>
                                        <tr class="text-center">
                                            <th scope="row">1</th>
                                            <td> 123456789</td>
                                            <td>$10000</td>
                                            <td>4</td>
                                            <td>2022-07-05 14:32:07</td>
                                        </tr>
                                        <tr class="text-center">
                                            <th scope="row">1</th>
                                            <td> 123456789</td>
                                            <td>$10000</td>
                                            <td>4</td>
                                            <td>2022-07-05 14:32:07</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <!-- /订单数据 -->


                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /订单面板 -->


                    <!-- 收藏面板 -->
                    <div class="tab-pane fade" id="v-pills-save" role="tabpanel" aria-labelledby="v-pills-save-tab">收藏
                    </div>
                    <!-- 收藏面板 -->
                    <!-- 修改密码面板 -->
                    <div class="tab-pane fade" id="v-pills-password" role="tabpanel"
                         aria-labelledby="v-pills-password-tab">修改密码
                    </div>
                    <!-- 修改密码面板 -->
                    <!-- 修改地址面板 -->
                    <div class="tab-pane fade" id="v-pills-address" role="tabpanel"
                         aria-labelledby="v-pills-address-tab">修改地址
                    </div>
                    <!-- /修改地址面板 -->
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal 模态框 -->
<div class="modal fade" id="orderItemModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">订单详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 订单数据 -->
                <table class="table table-striped table-hover">
                    <thead>
                    <tr class="text-center">
                        <th scope="col">#</th>
                        <th scope="col">商品名称</th>
                        <th scope="col">单价</th>
                        <th scope="col">数量</th>
                        <th scope="col">小计</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="text-center">
                        <th scope="row">1</th>
                        <td>
                            商品名称1
                        </td>
                        <td>$10000</td>
                        <td>2</td>
                        <td>20</td>
                    </tr>
                    <tr class="text-center">
                        <th scope="row">1</th>
                        <td>
                            商品名称1
                        </td>
                        <td>$10000</td>
                        <td>2</td>
                        <td>20</td>
                    </tr>
                    </tbody>
                </table>
                <!-- /订单数据 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>